<template>
  <div>
    <div class="card-line">
      <Row>
        <Col span="6">
          <div class="SourcePieChart">
            <apexchart
              type="pie"
              width="380"
              :options="chartGarden"
              :series="seriesGarden"
            ></apexchart>
          </div>
        </Col>
        <Col span="18">
          <div class="descrip">
            <apexchart
              type="bar"
              height="350"
              :options="goodsColumn"
              :series="seriesColumn"
            ></apexchart>
          </div>
        </Col>
      </Row>
    </div>
  </div>
</template>

<script>
import { operateGoods } from "@/api/index";
var zh = require("../../../libs/zh.json");
export default {
  name: "cardLine",
  components: {},
  props: {
    timeSearch: {
      type: Object,
    },
  },
  data() {
    return {
      sourceStatistics: [],
      options: {},
      gooscCharts: true,
      goodsColumn: {},
      seriesColumn: [
        {
          name: "",
          data: [],
        },
      ],
      seriesGarden: [],
      chartGarden: {},
      pricetop: [],
    };
  },
  methods: {
    init() {
      if (typeof this.timeSearch.startDate == "undefined") {
        return false;
      }
      // /平台端 --- 运营报告-货源统计
      this.sourceStatistics = [];
      operateGoods(this.timeSearch).then((res) => {
        let obj = res.result;
        if (obj.total_num == 0) {
          obj.price_num = 0;
          obj.bidding_num = 0;
        }
        this.sourceStatistics.push(
          obj.price_num,
          obj.bidding_num,
          obj.total_num
        );
        this.pricetop.push(obj.price_num, obj.bidding_num);
        // 柱状图数据
        this.seriesColumn = [
          {
            data: this.sourceStatistics,
          },
        ];
        this.$emit("childSourceGoods", obj);
      });
      // 柱状图结构
      this.goodsColumn = {
        chart: {
          type: "bar", //类型
          height: 240, //高度
          stacked: false,
          toolbar: {
            show: false,
          },
          locales: [zh],
          defaultLocale: "zh",
        },
        plotOptions: {
          bar: {
            horizontal: false, //纵向
            columnWidth: "20%",
            // endingShape: "rounded",
          },
        },
        dataLabels: {
          // 图形内展示数据
          enabled: false,
        },
        stroke: {
          show: true,
          width: 2,
          colors: ["transparent"],
        },
        xaxis: {
          categories: ["定价成单", "竞价成单", "总成单"],
        },

        yaxis: {
          title: {
            text: "", //
          },
        },
        fill: {
          opacity: 1,
          colors: ["#1E90FF"],
        },
        tooltip: {
          y: {
            formatter: function (val) {
              return +val + " 单"; //名称
            },
          },
        },
      };
      // 圆数据
      this.seriesGarden = this.pricetop;
      // 圆结构
      this.chartGarden = {
        chart: {
          width: "70%",
          type: "pie",
        },
        labels: ["定价", "竞价"],
        // 设置填充颜色
        fill: {
          colors: ["#1E90FF", "#87CEFA"],
        },
        theme: {
          monochrome: {
            enabled: true,
          },
        },
        plotOptions: {
          pie: {
            dataLabels: {
              offset: -5,
            },
          },
        },
        title: {
          text: "", //图表名称
        },
        dataLabels: {
          formatter(val, opts) {
            const name = opts.w.globals.labels[opts.seriesIndex];
            return [name, val.toFixed(1) + "%"];
          },
        },
        legend: {
          show: false,
        },
      };
    },
  },
  mounted() {
    this.init();
  },
};
</script>
<style lang="less" scoped>
.SourcePieChart {
  margin-left: 50px;
  margin-top: 30px;
}
.descrip {
  border: 1px solid #eee;
}
.card-line {
  height: 210px;
  .card-header {
    display: flex;
    height: 22px;
    align-items: center;
    justify-content: space-between;
    color: rgba(0, 0, 0, 0.45);
  }
  .value {
    height: 38px;
    margin-top: 4px;
    margin-bottom: 6px;
    overflow: hidden;
    color: rgba(0, 0, 0, 0.85);
    font-size: 30px;
    line-height: 38px;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
  }
  .today {
    margin-top: 8px;
    padding-top: 9px;
    border-top: 1px solid #e8e8e8;
    .v {
      margin-left: 8px;
      color: rgba(0, 0, 0, 0.85);
    }
  }
}
</style>